<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<script>
// Variations:
// 1. Whether at start or end of the inline block
// 2. Moving left or right
// 2. Resolved direction of the inline block in the parent context
// 3. Direction of text inside the inline block

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">|bar</span>baz</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable>foo<span style="display:inline-block">b|ar</span>baz</div>',
  'From start, move right, LTR resolved direction, LTR text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">|bar</span>baz</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable>fo|o<span style="display:inline-block">bar</span>baz</div>',
  'From start, move left, LTR resolved direction, LTR text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">bar|</span>baz</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable>foo<span style="display:inline-block">bar</span>b|az</div>',
  'From end, move right, LTR resolved direction, LTR text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">bar|</span>baz</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable>foo<span style="display:inline-block">ba|r</span>baz</div>',
  'From end, move left, LTR resolved direction, LTR text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">|\u05D0\u05D1\u05D2</span>baz</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable>foo<span style="display:inline-block">\u05D0|\u05D1\u05D2</span>baz</div>',
  'From start, move right, LTR resolved direction, RTL text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">|\u05D0\u05D1\u05D2</span>baz</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable>fo|o<span style="display:inline-block">\u05D0\u05D1\u05D2</span>baz</div>',
  'From start, move left, LTR resolved direction, RTL text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">\u05D0\u05D1\u05D2|</span>baz</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable>foo<span style="display:inline-block">\u05D0\u05D1\u05D2</span>b|az</div>',
  'From end, move right, LTR resolved direction, RTL text inside');

selection_test(
  '<div contenteditable>foo<span style="display:inline-block">\u05D0\u05D1\u05D2|</span>baz</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable>foo<span style="display:inline-block">\u05D0\u05D1|\u05D2</span>baz</div>',
  'From end, move left, LTR resolved direction, RTL text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">|bar</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4|\u05D5<span style="display:inline-block">bar</span>\u05D6\u05D7\u05D8</div>',
  'From start, move right, RTL resolved direction, LTR text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">|bar</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">b|ar</span>\u05D6\u05D7\u05D8</div>',
  'From start, move left, RTL resolved direction, LTR text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">bar|</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">ba|r</span>\u05D6\u05D7\u05D8</div>',
  'From end, move right, RTL resolved direction, LTR text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">bar|</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">bar</span>\u05D6|\u05D7\u05D8</div>',
  'From end, move left, RTL resolved direction, LTR text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">|\u05D0\u05D1\u05D2</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4|\u05D5<span style="display:inline-block">\u05D0\u05D1\u05D2</span>\u05D6\u05D7\u05D8</div>',
  'From start, move right, RTL resolved direction, RTL text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">|\u05D0\u05D1\u05D2</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">\u05D0|\u05D1\u05D2</span>\u05D6\u05D7\u05D8</div>',
  'From start, move left, RTL resolved direction, RTL text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">\u05D0\u05D1\u05D2|</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'right', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">\u05D0\u05D1|\u05D2</span>\u05D6\u05D7\u05D8</div>',
  'From end, move right, RTL resolved direction, RTL text inside');

selection_test(
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">\u05D0\u05D1\u05D2|</span>\u05D6\u05D7\u05D8</div>',
  selection => selection.modify('move', 'left', 'character'),
  '<div contenteditable dir="rtl">\u05D3\u05D4\u05D5<span style="display:inline-block">\u05D0\u05D1\u05D2</span>\u05D6|\u05D7\u05D8</div>',
  'From end, move left, RTL resolved direction, RTL text inside');
</script>
